<template>
  <div class="login">
    <div class="navbar">
      <van-nav-bar left-arrow title="會員登錄" @click-left="$router.back()" />
    </div>
    <div class="body-div">
      <div class="title-div">
        <p class="title-p">手機號登錄</p>
        <p class="text-p">未注冊的手機號登錄后將自動注冊</p>
      </div>
      <div class="form-div">
        <div class="outinput-div">
          <input v-model="phoneNum" placeholder="請輸入手機號碼" type="text" />
        </div>
        <div class="outinput-div">
          <input
            v-model="PicCode"
            placeholder="請輸入圖形驗證碼"
            type="text"
          /><img v-if="PicURL" :src="PicURL" @click="getPicCode" />
        </div>
        <div class="outinput-div">
          <input
            v-model="phoneSms"
            placeholder="請輸入短信驗證碼"
            type="text"
          />
          <button v-if="isClick" class="getcode-btn" @click="outDialog">
            獲取驗證碼
          </button>
          <button v-else class="getcode-btn1">重新發送（{{ oneMin }}）</button>
        </div>
        <van-button
          class="login-btn"
          color="linear-gradient(to right, #EDB338, #FE9515)"
          @click="login"
        >
          登錄
        </van-button>
      </div>
    </div>
  </div>
</template>
<script>
import { getLogin, getPicCode, getSendCode } from "@/api/login";

export default {
  name: "loginCom",
  components: {},
  data() {
    return {
      PicCode: "",
      PicKey: "",
      PicURL: "",
      isClick: true,
      oneMin: 6,
      phoneNum: "",
      phoneSms: "",
    };
  },
  computed: {
    //60s計時器
    timeOut() {
      setInterval(() => {
        if (this.oneMin > 0) {
          this.oneMin--;
        } else {
          this.isClick = true;
          this.oneMin = 6;
        }
      }, 1000);
    },
  },
  methods: {
    async getPicCode() {
      const {
        data: {
          data: { base64, key },
        },
      } = await getPicCode();
      this.PicURL = base64;
      this.PicKey = key;
    },
    //檢查手機號格式/圖形驗證碼是否正確
    async outDialog() {
      const res = await getSendCode(this.PicCode, this.PicKey, this.phoneNum);
      console.log(res);
      if (!/^1[3-9]\d{9}$/.test(this.phoneNum)) {
        this.$toast.fail("請輸入正確的手機號");
      }
      if (!/^\w{4}$/.test(this.PicCode)) {
        this.$toast.fail("請輸入正確的圖形驗證碼");
      } else {
        if (res.data.status == 200) {
          this.$toast.success("驗證碼已發送，請注意查收");
          this.timeOut;
          this.isClick = false;
        } else {
          this.$toast.fail(`${res.data.message}`);
        }
      }
    },
    async login() {
      if (!/^\w{6}$/.test(this.phoneSms)) {
        this.$toast.fail("手機驗證碼錯誤，請重新輸入");
        return;
      }
      const res = await getLogin(this.phoneNum, this.phoneSms);
      console.log(res);
      this.$store.commit("user/setUserInfo", res.data.data);
      if (res.data.status === 200) {
        this.$toast(`${res.data.message}`);
        this.$router.push("/");
      }
      // try {
      //   await getLogin(this.phoneNum, this.phoneSms);
      //   this.$toast("登錄成功！");
      //   this.$router.push("/");
      // } catch (error) {
      //   console.log(error);
      // }
    },
  },
  created() {
    this.getPicCode();
  },
};
</script>
<style lang="less">
.login {
  .body-div {
    padding: 40px 30px;

    .title-div {
      margin-bottom: 30px;

      .title-p {
        font-size: 25px;
        margin-bottom: 10px;
      }

      .text-p {
        color: #c8c8c8;
      }
    }

    .form-div {
      .outinput-div {
        border-bottom: 1px solid #f1f1f1;
        display: flex;
        justify-content: space-between;
        align-items: center;

        input {
          border: none;
          line-height: 70px;
        }

        img {
          width: 100px;
          height: 30px;
        }
      }

      .login-btn {
        margin-top: 30px;
        width: 100%;
        border-radius: 25px;
      }

      .getcode-btn {
        color: #f99b1d;
        background-color: transparent;
        border: none;
      }

      .getcode-btn1 {
        color: #c8c8c8;
        background-color: transparent;
        border: none;
      }
    }
  }
}
</style>
